import { defineComponent, onMounted, ref } from 'vue';
import { GetAnalysisAPI, IurRankAPI } from '@/service/api/IurCarrierAPI';
import { RegionDistribution } from '@common/index';
import IURCnt from './IURCnt';
import IURank from './IURank';
import './style.scss';

const maxHeight = 180; // 地图上柱子的最大高度
export default defineComponent({
  name: 'IurCarrier',
  setup() {
    const distributionData: any = ref([]);
    const IurRankRes: any = ref({});

    const onPageChange = async (page: number) => {
      if (page) {
        IurRankRes.value = await IurRankAPI({
          start: page, //分页，开始页
          rows: 10, //分页，每页显示多少数据
        });
      }
    };

    onMounted(async () => {
      [distributionData.value, IurRankRes.value] = await Promise.all([
        GetAnalysisAPI({
          filter: {
            region: {
              province: '江苏省', //省份
              city: '苏州市', //市
              district: null, //区
            },
          },
          groupby: ['district'],
          aggregate: {
            district: 'count',
          },
        }),
        IurRankAPI({
          start: 1, //分页，开始页
          rows: 10, //分页，每页显示多少数据
        }),
      ]);
    });

    return { onPageChange, distributionData, IurRankRes };
  },

  render() {
    const heightUnit = maxHeight / Math.max(...this.distributionData.map((d) => d.value));
    const cxyAmount = Number(sessionStorage.getItem('cxy'));

    return (
      <div id="IurCarrier">
        {/* 地图柱子 */}
        <ul>
          {this.distributionData.map((d) => {
            const noValue = d.value < 0;
            const pillarHeight = noValue ? 0 : d.value * heightUnit;

            return (
              <li style={{ top: `${d.top - pillarHeight}px`, left: `${d.left}px` }}>
                {!noValue && (
                  <>
                    <div style={{ height: `${pillarHeight}px` }}>
                      <section>
                        <aside>No.{noValue ? '-' : d.rank}</aside>
                        <aside>
                          {noValue ? '-' : d.value}
                          <span> 家</span>
                        </aside>
                      </section>
                    </div>
                    <img src={require('@assets/bg_point.png')}></img>
                  </>
                )}
              </li>
            );
          })}
        </ul>

        <main>
          <aside>
            {/* 产学研载体区域分布 */}
            <RegionDistribution title={'产学研载体'} data={this.distributionData}></RegionDistribution>
          </aside>

          {/* 企业数 */}
          <IURCnt data={cxyAmount}></IURCnt>

          <aside>
            {/* 在苏部署、省属科研院所 */}
            <IURank res={this.IurRankRes} onPageChange={this.onPageChange}></IURank>
          </aside>
        </main>
        <footer></footer>
      </div>
    );
  },
});
